<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>填写资料加入会员</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
 <style>
  body{
  background:none repeat scroll 0 0 #2E363F;
  font-family:'Open Sans', sans-serif;
  color:#08c;
  font-size:12px;
 }
 .widget-box{
  margin:20px auto;
   align:center;
}
  .form-horizontal .control-label{
   text-align:center;
   width:100px;
   
  }
  .form-horizontal .controls{
   margin-left:100px;
  }
  .div-btn{
   text-align:center;
   
  }
  .widget-title{
   text-align:center;
  }
  
  /*modal*/
  #myModalLabel{
   font-size:12px;
   }
   .att{
    height:15px;
   }
  #att1,#att2,#att3,#att4,#att5{
   height:12px;
   color:red;
   margin-left:100px;
   
  }
 </style>
</head>
<body>
<div class="container-fluid">
 <div class="row-fluid">
  <div class="span12">
   <div class="widget-box">
    <div class="widget-title">
    <h5 id="tit">填写以下资料加入会员，即可获得一次免费体验活动</h5>
   </div>
   <hr/>
    <div class="widget-content">
     <form  class="form-horizontal" method="post" name="form1">
       <div class="control-group">
       <label class="control-label">姓名</label>
       <div class="controls">
        <input type="text" class="span11" name="name" placeholder="姓名">
       </div>
       <div id="att1"></div>
      </div>
       <div class="control-group">
       <label class="control-label">手机号</label>
       <div class="controls">
        <input type="text" class="span11" name="phone" placeholder="您绑定账户的手机号">
       </div>
       <div id="att2"></div>
      </div>
      <div class="control-group">
       <label class="control-label">电子邮箱</label>
       <div class="controls">
        <input type="email" class="span11"  name="email" placeholder="邮箱地址">
       </div>
       <div id="att3"></div>
      </div>
      <div class="control-group">
       <label class="control-label">在读学校</label>
       <div class="controls">
        <input type="text" class="span11" name="school" placeholder="学校名称">
       </div>
       <div id="att4"></div>
      </div>
      <div class="control-group">
       <label class="control-label">在读年级</label>
       <div class="controls">
       <select class="span11" name="grade">
        <option value="1">大一</option>
        <option value="2">大二</option>
        <option value="3">大三</option>
        <option value="4">大四</option>
       </select>
       </div>
       <div id="att5"></div>
      </div>
      
     </form>
     <div class="div-btn">
        <button class="btn btn-primary" type="submit" onclick="check3()">加入会员</button>
      </div>
    </div>
   </div>
  </div>
 </div>
</div>

<!-- Modal -->
<div id="myModal"  class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">您还未绑定账户，请先绑定账号</h3>
  </div>
  <div class="modal-body">
      <div style="display:block">
	     <div ><input type="tel" style="display:block;width:95%" placeholder="手机号"  name="phone1"  class="form-control"></div>
		 <div id="attach1" class="att" style="font-size:12px" ></div>
		 <div style="width:60%;float:left;" >
		  <input type="text"  style="display:block;width:100%" placeholder="手机验证码"  name="checkcode"  class="form-control">
         </div>
         <div  style="width:30%;float:left;">	         
          <input type="submit" id="code" style="display:block;width:100%;margin-left: 25px;line-height: 23px;" name="btn" class="form-control"  value="获取验证码">
         </div>
         <div id="attach2" class="att" style="font-size:12px;clear:both;" ></div>
         <div style="text-align:center;"><button type="submit" style="background:#006dcc" id="bind" onclick="check2()" class="btn btn-lg btn-sigin"><i class="icon-ok"></i>绑定</button></div>
     </div>
 </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
  </div>
 </div>
 <script src="js/jquery.min.js"></script>  
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
 var flag="<%=request.getAttribute("key")%>";
 /*modal的大小位置设置*/
$("document").ready(function(){
	if(flag=="1"){
		 $('#myModal').modal("show").css({
			    width: '300',
			    'margin-left': function () {
			       return -($(this).width() / 2)
			   }
		 });
		 $("#myModal .modal-body").css("overflow",'hidden');
	}else if(flag=="2"){
		 $('#myModal').modal("hide");
	}
});

$("input[name='phone1']").blur(function(){
	 if(form1.phone1.value==""){
		 $("#attach1").append("该项不能为空");
		 return;
	 }
	 if(form1.phone1.value.length!=11){
		 $("#attach1").append("请检查用户名格式");
		 return;
	 }

  });
 $("input[name='phone1']").focus(function(){
	 $('#attach1').empty(); 
	 $("#attach2").empty(); 
 });

 $("input[name='checkcode']").blur(function(){
	  if(form1.checkcode.value==""){
		  $("#attach2").append("此项不能为空");
		  return;
	  }

 });
 
  $("input[name='checkcode']").focus(function(){
	     $("#attach1").empty(); 
		 $("#attach2").empty(); 
  });
  
  $("document").ready(function(){
		/*防刷新，检测是否存在cookie*/
		if($.cookie("captcha")){
			var count=$.cookie("captcha");
			var btn=$("input[name='btn']");
			btn.val(count+'秒后可重新获取').attr('disabled',true).css("cursor","not-allowed");
			var resend=setInterval(function(){
				count--;
				if(count>0){
					btn.val(count+'秒后可重新获取').attr('disabled',true).css("cursor","not-allowed");
				    $.cookie("captcha",count,{path:'/',expires:(1/86400)*count});
				}else{
					clearInterval(resend);
					btn.val("获取验证码").removeClass("disabled").removeAttr("disabled style");
				}
			}, 1000);
		}
 });
 $("#code").click(function(){
	   /*检查pnone是否为空*/
	   if($("input[name='phone1']").val()==""){
		   $("#attach1").empty();
		   $("#attach1").append("该项不能为空");
		   return false;
	   }
		 if($("input[name='phone1']").val().length!=11){
			 $("#attach1").empty();
			 $("#attach1").append("请检查用户名格式");
			 return false;
		 }
	  //发送验证码
	   var btn=$("input[name='btn']");
	   var count=60;
	   /*请求发送手机验证码*/
	   $.ajax({
		  url:"<%=request.getContextPath()%>/login?method=sendcode",
		  type:"get",
		  dataType:"json",
		  data:{mobile:$("input[name='phone1']").val()},
		  success:function(){
			  
		  }
	   });
	   
	   var resend=setInterval(function(){
	   count--;
	   if(count>0){
		   btn.val(count+"秒后可重新获取");
		   $.cookie("captcha",count,{path:'/',expires:(1/86400)*count});
   
	   }else{
		   clearInterval(resend);
		   btn.val("获取密码").removeAttr("disabled style");
		   
	   }
       }, 1000);
	   btn.attr("diabled",true).css("cursor","not-allowed");
      return false;
 });
 
 function check2(){
	  var result=false;
	   if($("input[name='phone1']").val()==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach1").append("该项不能为空");
		   return result;
	   }
	   if($("input[name='checkcode']").val()==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach2").append("该项不能为空");
		   return result;
	   }
	   $.ajax({
			  url:"<%=request.getContextPath()%>/login?method=modallogin",
			  async: false,
			  type:"post",
			  dataType:"json",
			  data:{code:$("input[name='checkcode']").val(),phone:$("input[name='phone1']").val(),openid:"<%=request.getAttribute("openid")%>"},
			  success:function(data){
				 if(data.flag==0){
					 $("#attach2").empty();
					 $("#attach2").append(data.msg);
					 result=false;
					
				 }else if(data.flag==1){
					 $("#myModalLabel").html("绑定成功，继续填写资料加入会员");
					 result=true;
				 }
			  }
		   });
	   return result;
 }

/*填写资料
 * 
 */
 var regexp=/^1[0-9]{10}/;
 var regexp2=/[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+/;
 
$("input[name='name']").blur(function(){
	if($(this).val()==""){
		$("#att1").empty();
		$("#att1").append("不能为空");
		return;
	}
});

$("input[name='name']").focus(function(){
	$("#att1").empty();
});
	
$("input[name='phone']").blur(function(){
	if(form1.phone.value==""){
		$("#att2").empty();
		$("#att2").append("不能为空");
		return;
	}
	if(!regexp.test(form1.phone.value)){
		$("#att").empty();
		$("#att2").append("手机号格式不正确");
		return;
	}
})
$("input[name='phone']").focus(function(){
	$("#att2").empty();

});

$("input[name='email']").blur(function(){
	if(form1.email.value==""){
		$("#att3").empty();
		$("#att3").append("不能为空");
		return;
	}
	if(!regexp2.test(form1.email.value)){
		$("#att3").empty();
		$("#att3").append("邮箱格式不正确");
		return;
	}
});
$("input[name='email']").focus(function(){
	$("#att3").empty();
});


$("input[name='shcool']").blur(function(){
	if($(this).value==""){
		$("#att4").empty();
		$("#att4").append("不能为空");
	}
	
});
$("input[name='school']").focus(function(){
	$("#att4").empty();
});

$("input[name='grade']").blur(function(){
	if($(this).val()==""){
		$("#att5").empty();
		$("#att6").append("不能为空");
	}
	
});
$("input[name='grade']").focus(function(){
	$("#att5").empty();
	
});
function check3(){
	if($("input[name='name'").val()==""){
		$("#att1").empty();
		$("#att1").append("不能为空");
		return false;
	}
	if($("input[name='phone'").val()==""){
		$("#att2").empty();
		$("#att2").append("不能为空");
		return false;
	}
	if(!regexp.test(form1.phone.value)){
		$("#att2").empty();
		$("#att2").append("手机号格式不正确");
		return false;
	}
	if($("input[name='email'").val()==""){
		$("#att3").empty();
		$("#att3").append("不能为空");
		return false;
	}
	if(!regexp2.test(form1.email.value)){
		$("#att3").empty();
		$("#att3").append("邮箱格式不正确");
		return;
	}
	if($("input[name='school'").val()==""){
		$("#att4").empty();
		$("#att4").append("不能为空");
		return false;
	}
	if($("input[name='grade'").val()==""){
		$("#att5").empty();
		$("#att5").append("不能为空");
		return false;
	}
	$.ajax({
		url:"<%=request.getContextPath() %>/member?method=mobile&page=add",
	    type:"post",
	    datatype:"json",
	    data:{name:$("input[name='name']").val(),phone:$("input[name='phone']").val(),email:$("input[name='email']").val(),school:$("input[name='school']").val(),grade:$("select[name='grade']").val()},
		success:function(data){
			$("#tit").html(data.msg);
		}
	});
	return false;
}

</script>
</body>
</html>